<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>回访分析</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js"></script>
    <script src="/echarts/echarts.js"></script>
    <script src="/echarts/chalk.js"></script>
</head>
<body style="background-color: rgb(57,61,73)">


<div class="layui-carousel" id="shuffling"
     style="background-color: rgb(57,61,73);position:absolute;top:55%;left:50%;transform: translate(-50%,-50%);">
    <div carousel-item="">
        <div style="background-color: rgb(57,61,73)">
            <!--条件显示图表-->
            <form class="layui-form" style="position:absolute;left:15%;">
                <span style="font-size: 18px;font-weight: bold;color: white;">日期区间：</span>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="startTime" id="startDate" placeholder="yyyy-MM-dd" autocomplete="off"
                               class="layui-input">
                    </div>
                    <span style="font-size: 18px;font-weight: bold;color: white;">—</span>
                    <div class="layui-input-inline">
                        <input type="text" name="endTime" id="endDate" placeholder="yyyy-MM-dd" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <button class="layui-btn" lay-submit lay-filter="timeFilter" data-type="reload">搜索</button>
                <button class="layui-btn layui-btn-primary" type="reset" id="resetButton">重置</button>
            </form>
            <!--图表显示-->
            <div id="visitEchartName" style="height:540px;width: 1400px;top:40px"></div>
        </div>
        <div style="background-color: rgb(57,61,73)">
            <!--条件显示图表-->
            <form class="layui-form" style="position:absolute;left:44%;transform: translate(-50%);">
                <span style="font-size: 18px;font-weight: bold;color: white;">代理人：</span>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="loginName" id="nameTableSelect" autocomplete="off"
                               placeholder="请输入代理人登录名" class="layui-input">
                    </div>
                </div>
                <button class="layui-btn" lay-submit lay-filter="loginNameFilter" data-type="reload">搜索</button>
                <button class="layui-btn layui-btn-primary" type="reset" id="resetButton1">重置</button>
            </form>
            <!--图表显示-->
            <div id="visitEchartTime" style="height:540px;width: 1400px;top:40px"></div>
        </div>
    </div>
</div>
</body>
<script>
    //自定义layui组件的目录
    layui.config({
        base: '/layui/lay/modules/'
    }).extend({
        //设定组件别名
        tableSelect: 'tableSelect',
    });
    layui.use(['jquery', 'carousel', 'laydate', 'form', 'tableSelect'], function () {
        let $ = layui.jquery;
        let carousel = layui.carousel;
        let laydate = layui.laydate;
        let form = layui.form;
        let tableSelect = layui.tableSelect

        tableSelect.render({
            elem: '#nameTableSelect',	//定义输入框input对象 必填
            checkedKey: 'userId', //表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'loginName',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '真实姓名搜索',	//搜索输入框的提示文字 默认关键词搜索
            table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '/user/findAll',
                cols: [
                    [
                        {type: 'radio'}
                        , {field: 'userId', title: '编号', width: 80, sort: true}
                        , {field: 'loginName', title: '登录名', width: 100}
                        , {field: 'userName', title: '真实姓名', width: 120}
                    ]
                ]
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                elem.val(data.data[0].loginName)
            }
        })

        //重置按钮点击事件
        $("#resetButton").click(function () {
            showChartName("");
        })
        $("#resetButton1").click(function () {
            showChartTime("");
        })

        //日期
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });

        //常规轮播
        carousel.render({
            elem: '#shuffling'
            , arrow: 'always'
            , width: '1400px'
            , height: '580px'
            , interval: 5000
        });

        //调用考勤图方法
        showChartName("");
        showChartTime("");

        //表单提交
        form.on('submit(timeFilter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            let str = "?startTime=" + data.field.startTime + "&endTime=" + data.field.endTime
            //调用考勤图方法
            showChartName(str)
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //表单提交
        form.on('submit(loginNameFilter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            let str = "?loginName=" + data.field.loginName
            //调用考勤图方法
            showChartTime(str, data.field.loginName)
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //考勤图方法
        function showChartName(str) {
            $.ajax({
                url: "/business/visitEchartName" + str,
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    if (data.code == 0) {
                        //获取横坐标
                        let loginNameX = data.data.loginNameX;
                        // 获取y坐标1
                        let visitCountY = data.data.visitCountY;
                        // 获取y坐标2
                        // let checkOutY = data.data.checkOutY;
                        // 基于准备好的dom，初始化echarts实例
                        let myChartName = echarts.init(document.getElementById('visitEchartName'), 'chalk');
                        // 指定图表的配置项和数据
                        let optionName = {
                            title: {
                                text: '回访分析',
                                subtext: '回访数量'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['回访数量']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataView: {show: true, readOnly: false},
                                    magicType: {show: true, type: ['line', 'bar']},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            calculable: true,
                            xAxis: [
                                {
                                    type: 'category',
                                    data: loginNameX
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                }
                            ],
                            series: [
                                {
                                    name: '回访数量',
                                    type: 'line',
                                    data: visitCountY,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChartName.setOption(optionName);
                    }
                }
            })
        }

        function showChartTime(str, loginName) {
            $.ajax({
                url: "/business/visitEchartTime" + str,
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    if (data.code == 0) {
                        //获取横坐标
                        let monthX = data.data.monthX;
                        // 获取y坐标1
                        let visitCountY = data.data.visitCountY;
                        // 获取y坐标2
                        // let checkOutY = data.data.checkOutY;
                        // 基于准备好的dom，初始化echarts实例
                        let myChartTime = echarts.init(document.getElementById('visitEchartTime'), 'chalk');
                        if (loginName == null || loginName === "") {
                            loginName = 'enzo'
                        }
                        // 指定图表的配置项和数据
                        let optionTime = {
                            title: {
                                text: loginName + '回访分析',
                                subtext: '回访数量'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['回访数量']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataView: {show: true, readOnly: false},
                                    magicType: {show: true, type: ['line', 'bar']},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            calculable: true,
                            xAxis: [
                                {
                                    type: 'category',
                                    data: monthX
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                }
                            ],
                            series: [
                                {
                                    name: '回访数量',
                                    type: 'bar',
                                    data: visitCountY,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChartTime.setOption(optionTime);
                    }
                }
            })
        }
    })
</script>
</html>